<!DOCTYPE html>
 <html>
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <title>坐标拾取</title>
     <script type="text/javascript" src="../../assets/jquery/dist/jquery.min.js"></script>
     <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=78afc12d4a6330cc782e747822fa50df"></script>
     <style>
     	* {
     		font-size: 12px;
     		text-align:center;
     	}
		#iMap {
			width: 80%;
			float: left;
		}
		.info {
			float: right;
			width: 20%;
		}
		label {
			width: 80px;
			float: left;
		}
		.detail {
			float: right;
			width: 17%;
			padding: 1%;
			height: 55px;
			margin-top: 10px;
			border: 1px solid #aaccaa;
		}
	</style>
     </head>
 <body onload="mapInit()">
	<div id="iMap"></div>
	<div class="info">
		<h3>高德地图坐标拾取工具</h3>
		<p>
			<div>鼠标可以缩放地图和拖动地图</div>
			<div>点击地图即可获得经纬度坐标</div>
		</p>
	</div>
	<div class="detail">
		<div id="lnglat"> </div>
		<div id="iAddress"> </div>
	</div>
	<div class="form-group layer-footer" style="display:none">
          <button type="button" class="btn btn-primary ok" style="float:right;margin-right:20px;">确定 <i
                  class="icon-arrow-right14"></i></button>
     </div>
</body>
 <script language="javascript">
 	$('#iMap').height($(window).height()-20);
     var mapObj;
     var lnglatXY;
     //初始化地图
     function mapInit() {
         mapObj = new AMap.Map("iMap", {
             level: 12, //设置地图缩放级别
         });
         AMap.event.addListener(mapObj, 'click', getLnglat); //点击事件
         mapObj.plugin('AMap.Geolocation', function() {
             geolocation = new AMap.Geolocation({
                 enableHighAccuracy: true,//是否使用高精度定位，默认:true
                 timeout: 10000,          //超过10秒后停止定位，默认：无穷大
                 buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
                 buttonPosition:'RB'
             });
             mapObj.addControl(geolocation);
             geolocation.getCurrentPosition();
             AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
         });
         //解析定位结果
         function onComplete(data) {
             mapObj.clearMap();
             x = data.position.getLng();
             y = data.position.getLat();
             document.getElementById("lnglat").innerHTML = x + "," + y;
             lnglatXY = new AMap.LngLat(x, y);
             geocoder();
         }
      }
     function geocoder() {
         var MGeocoder;
         //加载地理编码插件
  		mapObj.plugin(['AMap.ToolBar','AMap.Scale','AMap.OverView','AMap.MapType','AMap.Geolocation'],
			function() {
				mapObj.addControl(new AMap.ToolBar());
				mapObj.addControl(new AMap.Scale());
				mapObj.addControl(new AMap.OverView({isOpen:true}));
				mapObj.addControl(new AMap.MapType());
				mapObj.addControl(new AMap.Geolocation());
		});
         mapObj.plugin(["AMap.Geocoder"], function () {
             MGeocoder = new AMap.Geocoder({
                 radius: 1000,
                  extensions: "all"
             });
             //返回地理编码结果
             AMap.event.addListener(MGeocoder, "complete", geocoder_CallBack);
             //逆地理编码
             MGeocoder.getAddress(lnglatXY);
             });
         //加点
         var marker = new AMap.Marker({
             map: mapObj,
             icon: new AMap.Icon({
             image: "https://webapi.amap.com/theme/v1.3/markers/n/mark_bs.png" ,
                 size: new AMap.Size(58, 30),
                 imageOffset: new AMap.Pixel(-0, -0)
	         }),
	         position: lnglatXY,
             offset: new AMap.Pixel(-5, -30)
         });
         // mapObj.setFitView();
     }
    //回调函数
     function geocoder_CallBack(data) {
         var address;
         //返回地址描述
         address = data.regeocode.formattedAddress;
         console.log(address);
         //返回结果拼接输出
         document.getElementById("iAddress").innerHTML = address;
      }
     var x,y;
     //鼠标点击，获取经纬度坐标
     function getLnglat(e) {
         mapObj.clearMap();
         x = e.lnglat.getLng();
         y = e.lnglat.getLat();
         document.getElementById("lnglat").innerHTML = x + "," + y;
         lnglatXY = new AMap.LngLat(x, y);
         geocoder();
      }
     $('.ok').on('click', function() {
         $('.lon', parent.document).val(x);
         $('.lat', parent.document).val(y);
         try {
             var index = parent.Layer.getFrameIndex(window.name);
             parent.Layer.close(index);
         }catch(e){}
     });
     </script>
 </html>